<template>
  <div class="container">
    <div class="pv-container">
      <el-card class="card" shadow="hover">
        <div ref="pvLine" style="width: 100%; height: 400px"></div>
      </el-card>
      <el-card class="card" shadow="hover">
        <div ref="pvLine1212" style="width: 100%; height: 400px"></div>
      </el-card>
    </div>

    <div class="uv-container">
      <el-card class="card" shadow="hover">
        <div ref="uvLine" style="width: 100%; height: 400px"></div>
      </el-card>
      <el-card class="card" shadow="hover">
        <div ref="uvLine1212" style="width: 100%; height: 400px"></div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="js">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts/core';
import { GridComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { TitleComponent, MarkLineComponent, MarkPointComponent,ToolboxComponent } from 'echarts/components';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { getPvHourly, getPvHourly1212, getUvHourly, getUvHourly1212 } from '@/api/index';
import { useRouter } from 'vue-router';

echarts.use([GridComponent, ToolboxComponent, LineChart, CanvasRenderer, UniversalTransition, TitleComponent, MarkLineComponent, MarkPointComponent]);

const pvLine = ref(null);
const pvLine1212 = ref(null);
const uvLine = ref(null);
const uvLine1212 = ref(null);
const router = useRouter();

onMounted(async () => {
  const [pvHourlyData, pvHourly1212Data, uvHourlyData, uvHourly1212Data] = await Promise.all([
    getPvHourly(router),
    getPvHourly1212(router),
    getUvHourly(router),
    getUvHourly1212(router)
  ]);

  const hours = pvHourlyData.map(item => item.hour);
  const pvCounts = pvHourlyData.map(item => item.pvCount);
  const hours1212 = pvHourly1212Data.map(item => item.hour);
  const pvCounts1212 = pvHourly1212Data.map(item => item.pvCount);

  const myChart1 = echarts.init(pvLine.value);
  const option1 = {
    title: {
      text: '普通日期每小时 PV',
      left: 'center'
    },
    toolbox: {
      feature: {
        dataView: { readOnly: true },
        saveAsImage: {}
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      },
      formatter: function (params) {
        let result = params[0].name + ' 时<br/>';
        params.forEach(item => {
          result += item.marker + 'PV数: ' + item.value + ' 次<br/>';
        });
        return result;
      }
    },
    xAxis: {
      name: '时',
      type: 'category',
      data: hours
    },
    yAxis: {
      name: '次',
      type: 'value'
    },
    series: [
      {
        data: pvCounts,
        type: 'line',
        markLine: {
          data: [{ type: 'average', name: 'Avg' }]
        },
        markPoint: {
          data: [
            { type: 'max', name: 'Max' },
            { type: 'min', name: 'Min' }
          ]
        },
      }
    ]
  };
  option1 && myChart1.setOption(option1);

  const myChart2 = echarts.init(pvLine1212.value);
  const option2 = {
    title: {
      text: '双十二每小时 PV',
      left: 'center'
    },
    toolbox: {
      feature: {
        dataView: { readOnly: true },
        saveAsImage: {}
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      },
      formatter: function (params) {
        let result = params[0].name + ' 时<br/>';
        params.forEach(item => {
          result += item.marker + 'PV数: ' + item.value + ' 次<br/>';
        });
        return result;
      }
    },
    xAxis: {
      name: '时',
      type: 'category',
      data: hours1212
    },
    yAxis: {
      name: '次',
      type: 'value'
    },
    series: [
      {
        data: pvCounts1212,
        type: 'line',
        markLine: {
          data: [{ type: 'average', name: 'Avg' }]
        },
        markPoint: {
          data: [
            { type: 'max', name: 'Max' },
            { type: 'min', name: 'Min' }
          ]
        },
      }
    ]
  };
  option2 && myChart2.setOption(option2);

  const myChart3 = echarts.init(uvLine.value);
  const option3 = {
    title: {
      text: '普通日期每小时 UV',
      left: 'center'
    },
    toolbox: {
      feature: {
        dataView: { readOnly: true },
        saveAsImage: {}
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      },
      formatter: function (params) {
        let result = params[0].name + ' 时<br/>';
        params.forEach(item => {
          result += item.marker + 'UV数: ' + item.value + ' 次<br/>';
        });
        return result;
      }
    },
    xAxis: {
      name: '时',
      type: 'category',
      data: uvHourlyData.map(item => item.hour)
    },
    yAxis: {
      name: '次',
      type: 'value'
    },
    series: [
      {
        data: uvHourlyData.map(item => item.uvCount),
        type: 'line',
        markLine: {
          data: [{ type: 'average', name: 'Avg' }]
        },
        markPoint: {
          data: [
            { type: 'max', name: 'Max' },
            { type: 'min', name: 'Min' }
          ]
        },
      }
    ]
  };
  option3 && myChart3.setOption(option3);

  const myChart4 = echarts.init(uvLine1212.value);
  const option4 = {
    title: {
      text: '双十二每小时 UV',
      left: 'center'
    },
    toolbox: {
      feature: {
        dataView: { readOnly: true },
        saveAsImage: {}
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      },
      formatter: function (params) {
        let result = params[0].name + ' 时<br/>';
        params.forEach(item => {
          result += item.marker + 'UV数: ' + item.value + ' 次<br/>';
        });
        return result;
      }
    },
    xAxis: {
      name: '时',
      type: 'category',
      data: uvHourly1212Data.map(item => item.hour)
    },
    yAxis: {
      name: '次',
      type: 'value'
    },
    series: [
      {
        data: uvHourly1212Data.map(item => item.uvCount),
        type: 'line',
        markLine: {
          data: [{ type: 'average', name: 'Avg' }]
        },
        markPoint: {
          data: [
            { type: 'max', name: 'Max' },
            { type: 'min', name: 'Min' }
          ]
        },
      }
    ]
  };
  option4 && myChart4.setOption(option4);
});
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}

.pv-container,
.uv-container {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.el-card {
  flex: 1;
  min-height: 400px;
}
</style>
